<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
	<head>
		<%@ include file="/WEB-INF/views-jsp/include/taglib/taglib.jsp" %>
		<%@ include file="/WEB-INF/views-jsp/include/meta/meta.jsp" %>
		<%@ include file="/WEB-INF/views-jsp/include/link/link.jsp" %>
		<%@ include file="/WEB-INF/views-jsp/include/script/script.jsp" %>
		<link rel="stylesheet" type="text/css" href="${path}/html/js/js-jsp/du/dustDeviceDataShow/dustDeviceDataShow.css" />
		<script type="text/javascript" src="${path}/html/echart/echarts.min.js"></script>
		<script type="text/javascript" src="${path}/html/js/js-jsp/du/dustDeviceDataShow/dustDeviceDataShow.js?v=<%out.print(Math.random());%>"></script>
	</head>
	<body id="dustDataShowBody_">
		<div class="dustBox">
			<div class="dustBox-left">
				<div class="dustBox-left-top">
					<div class="topTitle">
						<p>
							<span class="titleDot"></span>
							<span style="margin-left: 18px;">实时数据</span>
						</p>
					</div>
					<hr class="hrStyle"/>
					<div class="beforeData">
						<p>
							<span>设备编号：</span>
							<span id="deviceId_">${requestScope.deviceData.deviceId == ""?"无":requestScope.deviceData.deviceId}</span>
							<span id="deviceName_">${requestScope.deviceData.deviceName == ""?"无":requestScope.deviceData.deviceName}</span>
							<span>数据更新时间：</span>
							<span id="updateTime_" >无</span>
						</p>
					</div>
					<div class="nowDataMiddle">
						<div class="nowDataLeft">
							<div class="aqiPieChart" id="aqiPieChart_">
							</div>
						</div>
						<div class="nowDataRight">
							<div class="nowDataRightInner">
								<span class="nowDataImg">
									<img src="${path}/html/images/dust/pm25.png"/>
								</span>
								<span class="duValue" id="pm10Value_">
									无
								</span>
								<span class="duUnit">
									ug/m3
								</span>
								<span class="duTitle chiness">
									pm10
								</span>
							</div>
							<div class="nowDataRightInner">
								<span class="nowDataImg">
									<img src="${path}/html/images/dust/pm25.png"/>
								</span>
								<span class="duValue" id="pm25Value_">
									无
								</span>
								<span class="duUnit">
									ug/m3
								</span>
								<span class="duTitle chiness">
									pm2.5
								</span>
							</div>
							<div class="nowDataRightInner">
								<span class="nowDataImg">
									<img src="${path}/html/images/dust/noise.png"/>
								</span>
								<span class="duValue" id="zsValue_">
									无
								</span>
								<span class="duUnit">
									db
								</span>
								<span class="duTitle chiness">
									噪声
								</span>
							</div>
							<div class="nowDataRightInner middle">
								<span class="nowDataImg">
									<img src="${path}/html/images/dust/windSpeed.png"/>
								</span>
								<span class="duValue" id="wdValue_">
									无
								</span>
								<span class="duUnit">
									m/s
								</span>
								<span class="duTitle chiness">
									风速
								</span>
							</div>
							<div class="nowDataRightInner middle">
								<span class="nowDataImg">
									<img src="${path}/html/images/dust/temperature.png"/>
								</span>
								<span class="duValue" id="tmpValue_">
									无
								</span>
								<span class="duUnit">
									℃
								</span>
								<span class="duTitle chiness">
									温度
								</span>
							</div>
							<div class="nowDataRightInner middle">
								<span class="nowDataImg">
									<img src="${path}/html/images/dust/humidity.png"/>
								</span>
								<span class="duValue" id="rhValue_">
									无
								</span>
								<span class="duUnit">
									%
								</span>
								<span class="duTitle chiness">
									湿度
								</span>
							</div>
							<div class="nowDataRightInner middle">
								<span class="nowDataImg">
									<img src="${path}/html/images/dust/windGrade.png"/>
								</span>
								<span class="duValue" id="wpValue_">
									无
								</span>
								<span class="duUnit">
									级
								</span>
								<span class="duTitle chiness">
									风级
								</span>
							</div>
							<div class="nowDataRightInner bottom">
								<span class="nowDataImg">
									<img src="${path}/html/images/dust/windDirect.png"/>
								</span>
								<span class="duValue" id="wsValue_">
									无
								</span>
								<span class="duUnit">
									风
								</span>
								<span class="duTitle chiness">
									风向
								</span>
							</div>
							<div class="nowDataRightInner bottom">
								<span class="nowDataImg">
									<img src="${path}/html/images/dust/pressure.png"/>
								</span>
								<span class="duValue" id="paValue_">
									无
								</span>
								<span class="duUnit">
									hpa
								</span>
								<span class="duTitle chiness">
									大气压
								</span>
							</div>
							<div class="nowDataRightInner bottom">
								<span class="nowDataImg">
									<img src="${path}/html/images/dust/pm25.png"/>
								</span>
								<span class="duValue" id="pm100_">
									无
								</span>
								<span class="duUnit">
									ug/m3
								</span>
								<span class="duTitle chiness">
									pm100
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="dustBox-left-middle">
					<div class="historyDataBorder">
						<div class="topTitle">
							<p>
								<span class="titleDot"></span>
								<span style="margin-left: 18px;">历史数据</span>
							</p>
						</div>
						<hr class="hrStyle"/>
						<div class="title">
							<span id="standardTitle_">空气质量指数AQI走势</span>
						</div>
						<div class="query-condition">
							<div class="startTime">
								<input class="easyui-datetimebox" id="startTime_" data-options="prompt:'请选择开始时间'" style="width:170px; height: 25px">
							</div>
							<div class="interval-line">
								<hr>
							</div>
							<div class="endTime">
								<input class="easyui-datetimebox" id="endTime_" data-options="prompt:'请选择结束时间'" style="width:170px; height: 25px">
							</div>
							<div class="time-subsection">
								<table>
									<tr>
										<td class="timeBgStyle" onclick="timeSelect(this)" id="second_"><a>秒</a></td>
										<td class="timeBgStyle" onclick="timeSelect(this)" id="minute_"><a>分</a></td>
										<td class="timeBgStyle" onclick="timeSelect(this)" id="hour_" style="background-color: skyblue"><a>时</a></td>
										<td class="timeBgStyle" onclick="timeSelect(this)" id="day_"><a>天</a></td>
										<td class="timeBgStyle" onclick="timeSelect(this)" id="weekend_"><a>周</a></td>
										<td class="timeBgStyle" onclick="timeSelect(this)" id="month_"><a>月</a></td>
										<td class="timeBgStyle" onclick="timeSelect(this)" id="year_"><a>年</a></td>
									</tr>
								</table>
							</div>
							<div class="dustType">
								<div class="dustTypeSelect">
									<ul>
										<li class="dustTypeLi" id="aqi" onclick="dustTypeSelect(this)" style="background-color: skyblue">
											<a>AQI</a>
										</li>
										<li class="dustTypeLi" id="pm25" onclick="dustTypeSelect(this)">
											<a>PM2.5</a>
										</li>
										<li class="dustTypeLi" id="pm10" onclick="dustTypeSelect(this)">
											<a>PM10</a>
										</li>
										<li class="dustTypeLi" id="tsp" onclick="dustTypeSelect(this)">
											<a>PM100</a>
										</li>
										<li class="dustTypeLi" id="wd" onclick="dustTypeSelect(this)">
											<a>风速</a>
										</li>
										<li class="dustTypeLi" id="tmp" onclick="dustTypeSelect(this)">
											<a>温度</a>
										</li>
										<li class="dustTypeLi" id="rh" onclick="dustTypeSelect(this)">
											<a>湿度</a>
										</li>
										<li class="dustTypeLi" id="zs" onclick="dustTypeSelect(this)">
											<a>噪声</a>
										</li>
										<li class="dustTypeLi" id="wp" onclick="dustTypeSelect(this)">
											<a>风力</a>
										</li>
									</ul>
								</div>
								<div class="dustTypeEchart" id="dustTypeEchart_">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="dustBox-left-bottom">
					<div class="topTitle">
						<p>
							<span class="titleDot"></span>
							<span style="margin-left: 18px;">数据标准参考</span>
						</p>
					</div>
					<hr class="hrStyle"/>
					<div class="standardTitle">
						<p>国家颗粒物标准</p>
					</div>
					<div class="standardDetail">
						<div class="standardValue">
							<p>根据GB3095-2012标准规定</p>
							<p>年平均最大值70μg/m³</p>
							<p>日平均最大值150μg/m³</p>
							<p>
							   <span class="grade one">
									优
								</span>
								<span class="gradeSd">
									扬尘值 0-50 μg/m³
							   </span>
							</p>
							<p>
							   <span class="grade two">
								   良
								</span>
								<span class="gradeSd">
									扬尘值 51-150 μg/m³
							   </span>
							</p>
							<p>
							   <span class="grade three">
									差
								</span>
								<span class="gradeSd">
									扬尘值 > 150 μg/m³
							   </span>
							</p>
						</div>
						<div class="standardValue">
							<p>根据GB3095-2012标准规定</p>
							<p>年平均最大值35μg/m³</p>
							<p>日平均最大值75μg/m³</p>
							<p>
							   <span class="grade one">
									优
								</span>
								<span class="gradeSd">
									扬尘值 0-35 μg/m³
							   </span>
							</p>
							<p>
							   <span class="grade two">
									良
								</span>
								<span class="gradeSd">
									扬尘值 35-75 μg/m³
							   </span>
							</p>
							<p>
							   <span class="grade three">
									差
								</span>
								<span class="gradeSd">
									扬尘值 > 75 μg/m³
							   </span>
							</p>
						</div>
						<div class="standardValue">
							<p>根据GB12523-2011标准规定</p>
							<p>昼间最大噪声70dB</p>
							<p>夜间最大噪声55dB</p>
							<p>
							   <span class="grade one">
									优
								</span>
								<span class="gradeSd">
									噪声值 0-40 dB
							   </span>
							</p>
							<p>
							   <span class="grade two">
									良
								</span>
								<span class="gradeSd">
									噪声值 41-70 dB
							   </span>
							</p>
							<p>
							   <span class="grade three">
									差
								</span>
								<span class="gradeSd">
									噪声值 > 71 dB
							   </span>
							</p>
						</div>
					</div>
					<div style="clear:both"></div>
				</div>
			</div>
			<div class="dustBox-right-top">
				<div class="topTitle">
					<p>
						<span class="titleDot"></span>
						<span style="margin-left: 18px;">已安装扬尘设备</span>
					</p>
				</div>
				<hr class="hrStyle"/>
				<c:if test="${requestScope.deviceData.deviceList == null || fn:length(requestScope.deviceData.deviceList) == 0}">
					<div>
						<img src="${path}/html/images/dust/deviceNoData.jpg" style="width: 240px;height: 170px;margin-top: 150px;margin-left: 20px;"/>
					</div>
				</c:if>
				<c:if test="${requestScope.deviceData.deviceList != null && fn:length(requestScope.deviceData.deviceList) > 0}">
					<c:forEach items="${requestScope.deviceData.deviceList}" var="deviceObj">
						<div class="installedDevice" onclick="deviceClick(this)">
							<div class="deviceNumber">
								<p class="deviceNumberInner">${deviceObj.deviceId}</p>
							</div>
							<div class="deviceAqi">
								<span>AQI：</span>
								<span id="aqi${deviceObj.deviceId}">无</span>
							</div>
							<div class="dustLevelCircle">
								<p id="aqiLevel${deviceObj.deviceId}">无</p>
							</div>
							<div class="dustArea">
								<p class="deviceAreaInner">${deviceObj.deviceName}</p>
							</div>
						</div>
					</c:forEach>
				</c:if>
			</div>
			<div class="dustBox-right-bottom">
				<div class="topTitle">
					<p>
						<span class="titleDot"></span>
						<span style="margin-left: 18px;">警示信息</span>
					</p>
				</div>
				<hr class="hrStyle"/>
				<div class="alarm-content">
					<table class="alarm-table">
						<tr class="alarm-title">
							<td>报警内容</td>
							<td>报警时间</td>
							<td>是否处理</td>
						</tr>
						<c:forEach items="${requestScope.deviceData.alarmList}" var="alarmObj">
								<tr class="alarm-args">
									<td>${alarmObj.alarmContent}</td>
									<td>${alarmObj.alarmTime}</td>
									<td>${alarmObj.alarmStatus}</td>
								</tr>
						</c:forEach>
					</table>
				</div>
			</div>
		</div>
	</body>
</html>

